<template>
    <component :is="slotType" :style="{width:columnWidth+'px'}"  valign="middle">
        <template v-if="slotType=='td'">
            <div class="bi-table-td-content">
                <template v-if="tree && treeFold">
                    <div class="bi-table-tree-line" v-for="i in row.__level" ></div>
                    <div class="bi-table-tree-dot" :class="[fold?'fold':'unfold']" @click.stop="handleFold" v-if="tree && treeFold && hasChildren" ></div>
                </template>
                
                <template v-if="$slots.default && init">
                    <template v-if="row!=undefined">
                        <slot :row="row" :index="index" :key="row.__key" ></slot>
                    </template>
                </template>
                <template v-else>
                {{value}}
                </template>
            </div>
        </template>

        <template v-if="slotType=='th'">
            <template v-if="$slots.header">
                    <slot name="header"></slot>
            </template>
            <template v-else>
                {{label}}
            </template>
        </template>
    </component>
</template>


<script>

export default{
    inject:['addColumnWidth','addColumnWidthUpdate','updateFold','tree','itemKey'],
    data(){

        let row  = {
            __id:'',
            __level:0,
            __parents:[]
        }

        let columnWidth = this.width;
        if (this.width && typeof(this.width)=="string"){
            columnWidth = parseFloat(this.width);
        }

        return {
            init:false,
            index:-1,
            value:'',
            slotType:'td',
            fold:false,
            hasChildren:false,
            keyValue:'',
            row,
            columnWidth
        }
    },
    methods:{
        handleFold(){
            this.fold =!this.fold;
            this.updateFold(this.row.__id,this.row[this.itemKey],this.fold);
        },
    },
    computed:{
        style(){
            let style = {};
            
            if (this.columnWidth){
                style.width =  this.columnWidth +'px';
            }
            return style;
        }
    }, 
    props:{
        label:{
            type:String,
            default:''
        },
        name:{
            type:String,
            name:''
        },
        width:{
            type:[String,Number],
            default:'auto'
        },
        minWidth:{
            type:[String,Number],
            default:100
        },
        treeFold:{
            type:Boolean,
            default:false
        }
    },
    mounted(){
        this.init = true;
        if (this.$parent.__bi_table===true){

            let parentNode = this.$el.parentNode;
            
            if (parentNode.classList.contains('bi-header-row')){
                this.slotType = 'th';
                this.addColumnWidth(this.width);
                if (this.width == 'auto'){
                    this.addColumnWidthUpdate('th',this.minWidth,(width)=>{                       
                        this.columnWidth = width;
                    });
                }                
            }
            
            if (parentNode.classList.contains('bi-body-row')){
                this.slotType = 'td';
                this.index = parseInt(parentNode.dataset.index);
                this.keyValue = parentNode.dataset.key;
                this.row = this.$parent.list[this.index]??{};
                if (this.tree && this.treeFold){
                    if (this.row.children && this.row.children.length > 0){
                        this.hasChildren = true;
                    }
                    this.fold = this.row.__fold??false;
                }
                if (this.name !='' ) this.value  = this.row[this.name]??'';
                
                if (this.index==0 &&  this.width =='auto'){
                     
                    this.addColumnWidthUpdate('td',this.minWidth,(width)=>{
                        
                        this.columnWidth = width;
                     });

                }
                
            }
        }else{
            console.error('调用错误')
        }
    }
}

</script>


<style>
.bi-table-td-content{
    display: flex;
    align-items: center;
    line-height: 26px;
 }

.bi-table-tree-line{
    width: 16px;
    height: 16px;
}
.bi-table-tree-dot{
    width: 16px;
    height: 16px;
    position: relative;
    cursor: pointer;
}

.bi-table-tree-dot::before{
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    right: 8px;
    top: 50%;
    margin-top: -5px;
    z-index: 1;
    transform:rotate(-135deg);
    border-left: 1px solid #73787e;
    border-bottom: 1px solid #73787e;
}

.bi-table-tree-dot.unfold:before{
    transform:rotate(-45deg);
    margin-top: -6px;
}

</style>